@charset "UTf-8";

@import "common/_reset";
@import "common/_common";
body{
//   &:target #bg{
//      left: -5000px;
//  }
     &:hover #bg{
        left: -9999px;
    }
    #bg{
        background:url(../img/background/foreground.png),
        url(../img/background/midground.png),
        url(../img/background/background.png);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height:2325px;
        transition: left 300s linear; 
        vertical-align: baseline;
    }
    .warp{
                width:90%;
//              min-width: 50%;
                height:2000px;
                margin: 0 auto;
//             background-color:white;
                opacity: 0.95;
                padding:20px 50px 0px;
                
                
                header{
                    width: 100%;
                    vertical-align: middle;
                    position: relative;
                    .header_bg{
                        background-color: gray;
                        opacity: 0.4;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                    }
                  .officia_icon{
                        height: 80px;
                        float: left;
                       
                      
                    }
                    .pang_menu{
                        float: right;
                        ul{
                            
                            li{
                                float: left;
                                margin-left: 60px;
                                &:nth-of-type(5){
                                    a:hover{
                                        color: #0099FF;
                                        box-shadow: none !important;
                                    }
                                }
                                 .iconfont{
                                    color: white;
                                    font-size: 40px;
                                    &:hover{
                                        color: #0099FF;
                                    }
                                } 
                                
                                a{  
                                    font-size: 33px;
                                    color:white;
                                    display: block;
                                    padding: 10px;
                                    text-align: center;
                                    width: 152px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    opacity: 0.95;
                                    -webkit-transition:-webkit-box-shadow 0.5s ease-out;
                                    &:hover{
                                        
                                        box-shadow: 0px 0px 15px #0099ff;
                                    }
                                    
                                    span{
                                        font-size: 20px;
                                        margin-top: 7px;
                                        color: #838383;
                                        display: block;
                                        overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                    .pang_weixin{
                        float: right;
                        width: 50px;
                        margin-left: 60px;
                       
                    }
                }
                nav{
                    width: 100%;
                    height: 367px;
                    background-color: #08c5c8;
                    overflow: hidden;
                    .gamelist_game{
                        height: 286px;
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .game_content{
                        width: 100%;
                        height: 81px;
                       
                        .carzy_game{
                            width: 160px;
                            height: 81px;
                            background-color:#ffd203;
                            float: left;
                            border-left: 1px solid black;
                            font-size: 20px;
                            color: white;
                            text-align: center;
                            padding-top: 20px;
                            overflow: hidden;
                            white-space: nowrap;
                            margin-left: 244px;
                            span{
                                display: block;
                                font-size: 10px;
                                 overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            }
                            a{
                                color: white;
                                &:hover{
                                    color: black;   
                                }
                            }
                        }
                        .win_game{
                            float: left;
                            width: 160px;
                            height: 81px;
                            border-left: 1px solid black;
                            border-right: 1px solid black;
                             font-size: 20px;
                            color: white;
                            text-align: center;
                            padding-top: 20px;
                            overflow: hidden;
                            white-space: nowrap;
                             span{
                                display: block;
                                font-size: 10px;
                                 overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            }
                              a{
                                color: white;
                                &:hover{
                                    color: black;   
                                }
                            }
                        }
                    }
                }
                section{
                    width: 100%;
                    height: 1845px;
                    overflow: hidden;
                    position: relative;
                    .section_bg{
                        background-color: gray;
                        opacity: 0.4;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        z-index: -1;
                    }
                    .gamelis_pic{
                        img:nth-of-type(1){
                            position: absolute;
                            top: 1100px;
                            left: 0;
                        }
                          img:nth-of-type(2){
                            position: absolute;
                            top: 400px;
                            right: 0;
                        }
                         img:nth-of-type(3){
                            position: absolute;
                            top: 0px;
                            left: 70px;
                        }
                    }
                    ul:nth-of-type(1){
                        width: 493px;
                        margin: 0 auto;
                        margin-top: 62px;
                        li:nth-of-type(1){
                            width: 82px;
                            height: 43px;
                            background-color: #13bdaf;
                            border-radius: 25px;
                            text-align: center;
                            line-height: 43px;
                            vertical-align: middle;
                            float: left;
                            margin-right: 22px;
                            a{
                                color: white;
                                display: block;
                                &:hover{
                                    color: black;
                                }
                            }
                        }
                         li:nth-of-type(2){
                            width: 115px;
                            height: 43px;
                            border-radius: 25px;
                            text-align: center;
                            line-height: 43px;
                            vertical-align: middle;
                            float: left;
                            border: 1px solid black;
                            margin-right: 22px;
                            a{
                                color: white;
                                display: block;
                                &:hover{
                                    color: black;
                                }
                            }
                        }
                         li:nth-of-type(3){
                            width: 115px;
                            height: 43px;
                            border-radius: 25px;
                            text-align: center;
                            line-height: 43px;
                            vertical-align: middle;
                            float: left;
                            border: 1px solid black;
                            margin-right: 22px;
                            a{
                                color: white;
                                display: block;
                                &:hover{
                                    color: black;
                                }
                            }
                        }
                         li:nth-of-type(4){
                            width: 115px;
                            height: 43px;
                            border-radius: 25px;
                            text-align: center;
                            line-height: 43px;
                            vertical-align: middle;
                            float: left;
                            border: 1px solid black;
                            a{
                                color: white;
                                display: block;
                                &:hover{
                                    color: black;
                                }
                            }
                        }
                    }
                    ul:nth-of-type(2){
                        width: 969px;
                        overflow: hidden;
                        margin: 0 auto;
                        li{
                            overflow: hidden;
                            float: left;
                            margin-right:25px;
                            margin-top: 80px;
                            .game_show{
                                width: 298px;
                                height: 445px;
                                background-color: #EAEAEA;
                                border-radius: 10px;
                                dl{
                                    float: left;
                                    width: 150px;
                                    margin: 17px 0 0 21px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    dd:nth-of-type(1){
                                        font-size: 24px;
                                    }
                                    dd:nth-of-type(2){
                                        font-size: 14px;
                                    }
                                    dd:nth-of-type(3){
                                        font-size: 12px;
                                    }
                                    dd:nth-of-type(4){
                                        font-size: 12px;
                                    }
                                }
                                .game_pay{
                                    float: right;
                                    margin: 17px 21px 0 0;
                                    text-align: right;
                                    .iconfont{
                                        font-size: 25px;
                                        display: block;
                                        margin-top: 10px;
                                        margin-right: 20px;
                                    }
                                    .pay{
                                        width: 70px;
                                        height: 30px;
                                        background-color: #14BBAD;
                                        border-radius: 25px;
                                        a{
                                            display: block;
                                           color: white;
                                            border-radius: 25px;
                                            -webkit-transition:-webkit-box-shadow 0.5s ease-out;
                                           &:hover{
                                               color: black;
                                               box-shadow: 0px 0px 15px #0099ff;
                                               
                                           }
                                           span{
                                               display: block;
                                               overflow: hidden;
                                               text-overflow: ellipsis;
                                               white-space: nowrap;
                                               text-align: center;
                                               vertical-align: middle;
                                               line-height: 30px;
                                           }
                                          
                                        }
                                    }
                                   .game_pic{
                                       a{
                                          img{
                                              display: block;
                                              border-radius:25px ;
                                          }
                                       }
                                   }
                                    
                                }
                            }
                            
                        }
                    }
                     footer{
                    .foot{
                        width: 100%;
                        height: 80px;
                        background-color: #09cdd0;
                        margin-top: 100px;
                        position: relative;
                        color: white;
                        font-size: 12px;
                        text-align: center;
                        line-height: 80px;
                        vertical-align: middle;
                        img:nth-of-type(1){
                            position: absolute;
                            left: 0;
                            bottom: 0;
                        }
                        img:nth-of-type(2){
                            position: absolute;
                            right: 0;
                            bottom: 0;
                        }
                    }
                }
                }
    }
}
